<!--视频播放页-->
<template lang="pug">
  kalix-master
    div
      div.box
        div.box-Title
          span.back(@click='prev')
            img(src="/static/VideoPage/u1009.png")
          span.textName {{CourseData.name}}
          p.xing(@click="titleXing" :class="isXing?'xingSix': 'xingLovely'")
          span 收藏
        div.video
          div.chapter
            div.chapterChild(@click="thelog")
              img(src="/static/VideoPage/u1030.png")
              p 章节
          div.shipin
            Video(v-if="videoSrc" :videoSrc="videoSrc" width="1040" height="464" ref="videoplay" @saveHistory="saveHistory")
            div.chapterLie(ref="zhangjie" v-show="isShow")
              ul
                li(v-for="(str,index) in VideosData" :key="str.index")
                  <!--h5 第一章-->
                  p {{str.title}}
                  ul
                    li.children(v-for="(str2,k) in VideosData[index].children" @click="play(str2)")
                      p {{ str2.title }}
          div.jianjie
            div.jianjieImg(@click="xianshi")
              img(src="/static/VideoPage/u1039.png")
            div.jieshao( ref="black" )
              h1.jieshaoH1 {{CourseData.name}}
              p.jieshaoP1 {{CourseData.uname}}
              span 课时 {{CourseData.classHour}}
              span 学分 {{CourseData.credit}}
              p.jieshaoP2 课程简介: {{CourseData.introduction}}
              div.guanbi( @click="yincang" ref="disappears")
                img(src="/static/VideoPage/u1017.png")
      div.pinglun
        div.pinglunLeft(ref="message")
          div.pingLunQu
            h1.pingLunTitle 评论区
            div.TheInput
              textarea( style="resize:none" maxlength="500" placeholder="请输入评论" @input="descInput" @keyup.enter="published" v-model="formModel.content")
              div.spanLength
                span 还可以输入
                span.spanRed {{remnant}}
                span 字
              p(@click="published" ) 发表
            div.pingFen
              span.pingFenMeet 课程满意度&nbsp;
              div.inlink
                Start(v-model="formModel.score" ref="start")
              div.clear-fix
              div.allCom
                div.allComa 全部评论 {{messageData.length}}
                div.comments
                  ul
                    li(v-for="(m,index) in messageData" v-model="index")
                      div.touxiang
                        img(:src="m.icon")
                        p.touxiangP {{m.uname}}
                      div.comRight
                        img.comRightImg(v-for="(star,index) in stars" :src="star.src" v-if="index < m.score")
                        <!--Start.comRightImg(:value="m.score")-->
                        p.comRightP {{m.content}}
                        span.comRightTime {{m.creationDate | formatDate}}
                      <!--div.Oper-->
                      <!--a(v-if="username === m.uname" v-on:click="shanChu(m)") 删除-->
                      <!--a(v-on:click="reply(m)") 回复-->
        div.pinglunRight
          div.QeCode
            span 添加微信
            img(src="/static/VideoPage/二维码_u907.png")
            p 扫码添加授课教师
</template>

<script type="text/ecmascript-6">
  import FormModel from './model'
  import Message from '../../components/Layout/message'

  export default {
    data() {
      return {
        value1: null,
        id: null,
        username: null,
        uid: null,
        vid: null,
        hid: null,
        stars: [
          {src: '/static/VideoPage/u921.png'},
          {src: '/static/VideoPage/u921.png'},
          {src: '/static/VideoPage/u921.png'},
          {src: '/static/VideoPage/u921.png'},
          {src: '/static/VideoPage/u921.png'}
        ],
        formModel: Object.assign({}, FormModel),
        CourseData: [],
        VideosData: [],
        remnant: 500,
        isShow: false,
        isXing: false,
        messageData: [],
        chapter: [
          {
            chapterTitle: '第一章课程介绍',
            capterCom: [
              {title: '1.1 Html 基础内容'},
              {title: '1.2 Html 中级内容'},
              {title: '1.3 Html 高级内容'}
            ]
          },
          {
            chapterTitle: '第二章课程介绍',
            capterCom: [
              {title: '2.1 CSS 基础内容'},
              {title: '2.2 CSS 中级内容'},
              {title: '2.3 CSS 高级内容'}
            ]
          },
          {
            chapterTitle: '第三章课程介绍',
            capterCom: [
              {title: '3.1 JS 基础内容'},
              {title: '3.2 JS 中级内容'},
              {title: '3.3 JS 高级内容'}
            ]
          }
        ],
        videoSrc: '',
        newValue: 0
        // videoConfig: {
        //   videoSrc: '/static/movie/77816626-1-6.mp4',
        //   videoWidth: '1040',
        //   videoHeight: '464'
        // }
      }
    },
    computed: {},
    filters: {
      formatDate: function (value) {
        let date = new Date(value)
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let m = date.getMinutes()
        m = m < 10 ? ('0' + m) : m
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    },
    mounted() {
      this.$KalixEventBus.$on('LOGIN_SUCCESS', this.init)
      this.init()
    },
    methods: {
      init() {
        this.username = this.$KalixCatch.get('user_name')
        this.uid = this.$KalixCatch.get('id')
        if (this.$route.params.isXing) {
          this.isXing = this.$route.params.isXing
        }
        this.id = this.$route.params.id
        this.getMessage(this.id)
        this.getCourse(this.id)
        // document.body.onkeydown = function (event) {
        //   if (event.keyCode === 32) {
        //     event.preventDefault()
        //   }
        // }
      },
      prev() {
        this.$router.go(-1)
      },
      descInput() {
        let txtVal = this.formModel.content.length
        this.remnant = 500 - txtVal
      },
      thelog() {
        this.isShow = !this.isShow
      },
      xianshi() {
        this.$refs.black.style.display = 'block'
      },
      yincang() {
        this.$refs.black.style.display = 'none'
      },
      getMessage(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/messages/getMesByCid',
          params: {
            'cid': id
          }
        }).then(res => {
          this.messageData = res.data.data
        })
      },
      getCourse(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/course/getCourseById',
          params: {
            'id': id
          }
        }).then(res => {
          this.CourseData = res.data.data[0]
          this.getAuth()
        })
      },
      getAuth() {
        if (this.CourseData.gname === '公开课') {
          this.getVideos(this.id)
        } else {
          if (this.username !== null) {
            this.getVideos(this.id)
          } else {
            Message.warning('请登录后观看视频！')
            this.$KalixEventBus.$emit('SHOW_LOGIN')
          }
        }
      },
      getVideos(id) {
        console.log('id===================', id)
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/videoss/getVideosByVid',
          params: {
            'cid': id,
            'audit': '通过'
          }
        }).then(res => {
          this.VideosData = res.data.children
          if (this.videoUrl != null) {
            this.videoSrc = this.VideosData[0].children[1].videoUrl
          }
          this.getCollect()
        })
      },
      getCollect() { // 获取收藏状态
        if (this.uid != null) {
          let jsonStr = {'userId': this.uid, 'courseId': this.id}
          this.axios.request({
            method: 'GET',
            url: '/camel/rest/user/collects',
            params: {
              jsonStr: jsonStr
            }
          }).then(res => {
            if (res.data.totalCount > 0) {
              this.isXing = true
            }
          })
        }
      },
      getHistory(vid) { // 查询历史记录是否存在
        let jsonStr = {'userId': this.uid, 'videoId': vid}
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/user/historys',
          params: {
            jsonStr: jsonStr
          }
        }).then(res => {
          if (res.data.totalCount === 0) {
            this.setHistory(vid)
          } else {
            this.hid = res.data.data[0].id
          }
        })
      },
      setHistory(vid) { // 添加历史记录
        this.axios.request({
          method: 'POST',
          url: '/camel/rest/user/historys',
          data: {
            userId: this.uid,
            videoId: vid
          }
        }).then(res => {
        })
      },
      saveHistory() { // 修改历史记录iswatch状态为true
        if (this.hid == null) {
          this.getHistory(this.vid)
        } else {
          this.axios.request({
            method: 'PUT',
            url: '/camel/rest/user/historys/' + this.hid,
            data: {
              id: this.hid,
              iswatch: true
            }
          }).then(res => {
          })
        }
      },
      // 根据视频vid查询视频点击量hits
      getHits(vid) {
        if (vid != null) {
          this.$http.request({
            method: 'GET',
            url: '/camel/rest/training/videoss/getVideosByid',
            params: {
              id: vid
            }
          }).then(res => {
              console.log('000000000000000', res)
              this.vid = res.data.data
              console.log('获取视频点击量', this.vid)
            })
        }
      },
      /**
       * 播放视频
       */
      play(item) {
        this.videoSrc = item.videoUrl
        this.$nextTick(() => {
          this.$refs.videoplay.play()
        })
        this.vid = item.id
        this.getHistory(item.id)
        this.getHits(this.vid)
      },
      published() {
        this.uid = this.$KalixCatch.get('id')
        var num = this.formModel.content.split(' ').join('').length
        if (num === 0) {
          this.$KalixMessage.error('请输入评论！')
          return false
        }
        if (this.uid == null) {
          Message.warning('请登录后评论！')
        } else {
          this.axios.request({
            method: 'POST',
            url: '/camel/rest/training/messages',
            data: {
              cid: this.$route.params.id,
              // uid: window.sessionStorage.getItem('id'),
              uid: this.uid,
              content: this.formModel.content,
              score: this.formModel.score
            }
          }).then(res => {
            if (res.data.success) {
              this.getMessage(this.id)
              this.formModel.content = ''
              this.$refs.start.reset()
            }
          })
        }
      },
      titleXing() {
        if (!this.isXing) {
          if (this.uid == null) {
            Message.warning('请登录后收藏！')
            this.isXing = false
          } else {
            this.axios.request({
              method: 'POST',
              url: '/camel/rest/user/collects',
              data: {
                courseId: this.id,
                userId: this.uid
              }
            }).then(res => {
              if (res.data.success) {
                Message.success(res.data.msg)
                this.isXing = !this.isXing
              } else {
                Message.error(res.data.msg)
              }
            })
          }
        } else {
          this.$confirm('确定取消收藏吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.request({
              method: 'GET',
              url: '/camel/rest/user/collects/deleteEntityByIds',
              params: {
                courseId: this.id,
                userId: this.uid
              }
            }).then(res => {
              if (res.data.success) {
                Message.success(res.data.msg)
                this.isXing = !this.isXing
              } else {
                Message.error(res.data.msg)
              }
            })
          })
        }
      },
      shanChu(m) {
        console.log('shachu----:', m)
        this.$confirm('确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.$http
            .delete('/camel/rest/training/messages/' + `${m.id}`, {})
            .then(res => {
              this.getMessage(this.id)
            })
        })
      },
      reply(m) {
        console.log('--reply----:', m)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .box
    width 1200px
    margin 0 auto
    -webkit-scrollbar display none

  .box-Title
    width 1200px
    height 50px
    line-height 50px

  .box-Title span
    margin-right 20px
    cursor pointer

  .back
    width 20px
    height 20px

  .back img
    width 20px
    height 20px
    verticalv middle

  .video
    width 1200px
    height 464px
    border-radius 4px
    background-color #000
    overflow hidden
    margin-bottom 22px
    position relative

  .chapter
    width 80px
    height 464px
    background-color #1C1F21
    display inline-block
    text-align center
    position relative

  .chapterChild
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    color #C6C6C6
    font-size 14px
    cursor pointer

  .chapterLie
    width 232px
    height 464px
    position absolute
    left 0
    top 0
    background-color #26292C
    color #fff

  .chapterLie li
    margin 10px

  /*.chapterLie H5*/
  /*font-size 13px*/
  .children p
    cursor pointer
    font-size 12px

  .chapterLie p
    font-size 14px
    line-height 20px
    color #C0C0C0
    margin 10px 0 10px 15px

  /*display none*/
  .chapterChild p
    margin-top 5px

  .shipin
    width 1040px
    height 100%
    display inline-block
    position relative

  .jianjie
    width 80px
    height 464px
    background-color #1C1F21
    display inline-block
    position relative

  .jieshaoH1
    font-size 18px
    font-weight 700
    margin-bottom 15px

  .jieshaoP1
    font-size 14px
    margin-bottom 15px

  .jieshao span
    display inline-block
    font-size 14px
    margin 0 14px 15px 0

  .jieshaoP2
    font-weight 700
    display block
    width 266px

  .guanbi
    position absolute
    right 20px
    top 15px
    cursor pointer

  .jianjieImg
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    cursor pointer

  .jianjieImg img
    vertical-algin middle

  .jieshao
    width 300px
    height 464px
    background-color #1C1F21
    position absolute
    right 0
    top 0
    color #ccc
    padding 36px 0 0 30px
    display block

  .pinglun
    width 1200px
    margin 0 auto
    height 1000px
    margin-top 12px

  .pinglunLeft
    width 800px
    float left

  .pinglunRight
    width 380px
    float right

  .pingLunTitle
    font-size 20px
    font-weight 700
    color #333
    margin-bottom 22px

  /*二维码*/
  .TheInput
    position relative
    textarea
      width 793px
      height 178px

  .spanLength
    position absolute
    right 22px
    bottom 8px
    font-size 14px
    color #999

  .spanRed
    color red

  .TheInput p
    position absolute
    right 30px
    bottom -50px
    width 80px
    height 35px
    line-height 35px
    background-color #4B95FF
    color #fff
    border-radius 5px
    text-align center
    cursor pointer

  .QeCode
    width 380px
    height 370px
    border 1px solid #ccc
    box-sizing border-box
    padding-left 98px
    border-radius 5px

  .QeCode span
    display block
    width 150px
    height 40px
    background-color #4B95FF
    border-radius 22px
    text-align center
    line-height 40px
    margin-top 44px
    margin-left 15px
    color #fff

  .QeCode img
    width 180px
    heihgt 180px
    margin-top 20px

  .QeCode p
    margin 20px 0 0 20px

  .inlink
    float left
    height 50px
    line-height 50px

  .inlink img
    margin-right 10px

  .pingFen
    height 50px
    /*line-height 50px*/
    margin-top 20px

  /*.pingFen:after*/
  /*content ' '*/
  /*clear both*/
  .pingFenMeet
    float left
    height 50px
    line-height 50px

  .allComa
    margin-top 40px

  .allComa
    width 100%
    height 30px
    background-color #F6F5FA
    padding-left 22px
    line-height 30px
    box-sizing border-box

  .yonghu
    margin-top 20px

  .touxiang
    width 50px
    height 100px
    display inline-block
    text-align center
    position absolute
    top 25px
    left 0

  .touxiang img
    width 50px
    height 50px

  .touxiangP
    font-size 14px
    display block
    height 30px

  .comRight
    display inline-block
    margin 20px 0 0 66px
    width 725px

  .comRight img
    width 15px

  /*.comRightImg*/
  /*margin 10px 5px 0 0*/

  .comRightP
    width 700px
    line-height 20px
    margin 10px 10px 5px 0
    font-size 15px
    font-weight 700
    word-wrap break-word
    word-break break-all
    overflow: hidden

  .comRightTime
    font-size 14px
    color #999

  .comRightDelect
    position absolute
    right 0
    bottom 0

  .xing
    display inline-block
    width 20px
    height 20px
    margin-right 5px

  .xingSix
    background-image url("/static/VideoPage/u921.png")
    background-size 100% 100%

  .xingLovely
    background-image url("/static/VideoPage/u1035.png")
    background-size 100% 100%
    cursor pointer

  .comments
    width 800px
    height 600px
    overflow-y auto
    overflow-x hidden

  .comments li
    position relative

</style>
